<template>
    <div style="width:100%">
        <div class="topBlock" v-if="!isMemberCenter">
            <div class="back" @click="toDefault">
                <el-icon>
                    <ArrowLeft />
                </el-icon>
                返回
            </div>
            <div class="pageTitle">采购商企业认证</div>
            <div class="progress">
                <div :class='index == authStatus ?"item active":"item "' v-for="(item,index) in steps" :key="index">
                    <div class="step">{{index+1}}</div>
                    <div class="name">{{item.name}}</div>
                </div>
            </div>
        </div>
        <c-main-template title="" :isBreadcrumb="false" class="mb-md">
            <div class="topBox">
                <div style="float:right" v-if="authStatus >= 2 ">
                    <el-button type="primary" size="small" @click="toAuthentication">重新认证</el-button>
                </div>
                <div class="title mb-0" v-if="authStatus == 0">填写企业认证信息</div>
                <div class="title mb-0" v-if="authStatus == 1">企业信息认证中</div>
                <div class="title mb-0" v-if="authStatus == 2">企业认证信息</div>
                <div class="title mb-0" v-if="authStatus == 3">企业认证信息已驳回，请重新认证</div>
            </div>
            <el-tabs v-model="activeName">
                <el-tab-pane label="基本资料" name="first">
                    <el-form label-width="auto" label-position="top" ref="ruleFormRef1" :model="ruleForm" :rules="rules1">
                        <el-row :gutter="24" v-loading="loading">
                            <!-- 企业信息 -->
                            <el-col :span="24" class="mt-30" style="margin-left: 6px;">
                                <el-col :span="9" class="mb-40">
                                    <el-form-item label="注册文件" prop="buyerDetail.regFileList">
                                        <div class="mb-sm upload_tips">
                                            1.请您上传清晰、无污物、完整的原件照片或彩色扫描件<br>
                                            2.支持.png、.jpg，且大小不超过2M
                                        </div>
                                        <div class="flex">
                                            <div class="seal-sample">
                                                <div class="seal-sample_upload">
                                                    <c-image-upload :disabled="disabled" type="Array" limit="1" :accept="['.png', '.jpg']" v-model="ruleForm.buyerDetail.regFileList" />
                                                </div>
                                                <div class="seal-sample_title">注册文件</div>
                                            </div>
                                        </div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item label="公司名称" prop="name">
                                        <div class="flex-y-center wh">
                                            <el-input :disabled="disabled" class="flex-1" :class="disabled || 'denterprise-name'" placeholder="请输入公司名称" size="large" v-model="ruleForm.name" />
                                        </div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item label="注册地址" prop="addressDetails">
                                        <el-input :disabled="disabled" size="large" v-model="ruleForm.addressDetails" placeholder="详细地址" class="input-with-select">
                                            <template #prepend>
                                                <el-form-item label="">
                                                    <el-select size="large" v-model="ruleForm.addressCountry" placeholder="国家" style="width: 115px">
                                                        <el-option v-for="(item, index) in Countries" :key="index" :label="item.name" :value="item.name" />
                                                    </el-select>
                                                </el-form-item>
                                            </template>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item label="联系人" prop="contactName" style="">
                                        <div style="display:flex">
                                            <el-input :disabled="disabled" size="large" v-model="ruleForm.contactName" placeholder="联系人" style="width:27%;margin-right:3%" />
                                            <el-input :disabled="disabled" size="large" v-model="ruleForm.areaCode" placeholder="电话地区码" style="width:27%;margin-right:3%" />
                                            <el-input :disabled="disabled" size="large" v-model="ruleForm.contactMobile" placeholder="联系电话" style="width:40%" />
                                        </div>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="9">
                                    <el-form-item label="邮箱" prop="email">
                                        <el-input placeholder="请输入邮箱" size="large" :disabled="disabled" v-model="ruleForm.email" />
                                        <el-tooltip effect="dark" content="请输入常用邮箱，用来接收签约邮件" placement="right" v-if="!disabled">
                                            <div class="enterprise-img ml-sm flex-center pointer">
                                                <img src="@/assets/img/help.png" />
                                            </div>
                                        </el-tooltip>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item label="办公照片" prop="buyerDetail.officePicList">
                                        <div>
                                            <div class="mb-sm upload_tips">
                                                仅支持.png、.jpg，且大小不超过500KB
                                            </div>
                                            <c-image-upload :disabled="disabled" type="Array" :accept="['.png', '.jpg']" v-model="ruleForm.buyerDetail.officePicList" />
                                        </div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item class="mt-30  is-required" label="印章样本">
                                        <div>
                                            <div class="mb-sm upload_tips">
                                                仅支持.png、.jpg，且大小不超过500KB
                                            </div>
                                            <div class="flex">
                                                <el-form-item class="mt-30 firstRed" label="" prop="buyerDetail.surname">
                                                    <div class="seal-sample">
                                                        <div class="seal-sample_upload">
                                                            <c-image-upload :disabled="disabled" type="String" limit="1" :accept="['.png', '.jpg']" v-model="ruleForm.buyerDetail.surname" />
                                                        </div>
                                                        <div class="seal-sample_title">公司章模</div>
                                                    </div>
                                                </el-form-item>
                                                <el-form-item class="mt-30 firstRed" label="" prop="buyerDetail.signaturePrincipal">
                                                    <div class="seal-sample">
                                                        <div class="seal-sample_upload">
                                                            <c-image-upload :disabled="disabled" type="String" limit="1" :accept="['.png', '.jpg']" v-model="ruleForm.buyerDetail.signaturePrincipal" />
                                                        </div>
                                                        <div class="seal-sample_title">授权委托人签字</div>
                                                    </div>
                                                </el-form-item>
                                            </div>
                                        </div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label=" ">
                                        <div>
                                            <div class="mb-sm upload_tips">
                                                请您按要求剪切您的印章扫描图像：长宽比例1:1并且让印章图像占满整个区域
                                            </div>
                                            <div class="flex">
                                                <div class="seal-sample">
                                                    <div class="seal-example_img">
                                                        <img src="@/assets/img/success-yinzhang.png" />
                                                    </div>
                                                    <div class="seal-sample_title">正确示例图</div>
                                                </div>
                                                <div class="seal-sample">
                                                    <div class="seal-example_img">
                                                        <img src="@/assets/img/error-yinzhang.png" />
                                                    </div>
                                                    <div class="seal-sample_title">正确示例图</div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-form-item>
                                </el-col>
                            </el-col>
                            <!-- 0-未认证，1-认证中，2-已认证，3=已驳回 -->

                        </el-row>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="银行信息" name="second">
                    <el-form label-width="auto" label-position="top" ref="ruleFormRef2" :model="ruleForm" :rules="rules2">
                        <el-row :gutter="24" v-loading="loading">
                            <!-- 银行信息 -->
                            <el-col :span="24" class="mt-30" style="margin-left: 6px;">
                                <el-col :span="9" class="mb-lg" v-if="!disabled">
                                    <el-button type="primary" size="large" @click="handleAdd">添加银行信息</el-button>
                                </el-col>
                                <div v-for="(item,index) in bankInputList" :key="index">
                                    <el-col :span="9" class="mb-lg mt-lg">
                                        <span style="float:right" v-if="!disabled">
                                            <el-icon color="#ff6355" @click="handleDelete(index)">
                                                <Delete />
                                            </el-icon>
                                        </span>
                                        银行信息{{index+1}}</el-col>

                                    <el-col :span="9" v-for="p in item" :key="p.key">
                                        <el-form-item :label="p.name" :prop='"buyerBankList."+p.key'>
                                            <div class="flex-y-center wh">
                                                <el-input :disabled="disabled" class="flex-1" :class="disabled || 'denterprise-name'" placeholder="请输入账户名称" size="large" v-model="ruleForm.buyerBankList[index][p.key]" />
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </div>
                            </el-col>
                        </el-row>

                    </el-form>
                </el-tab-pane>
            </el-tabs>

        </c-main-template>
        <div class="pd-lg mb-md" style="background:#FFF" v-if="!disabled">
            <el-col :span=" 24" class="ml-30">
                <div class="flex-end" style="align-items:center">
                    <div class="el-checkbox" @click="handleOpenManual">
                        <div :class="ruleForm.manual ? 'is-checked' : ''" class="el-checkbox__input">
                            <div class="el-checkbox__inner"></div>
                        </div>
                        <div class="el-checkbox__label">同意《企业认证协议》</div>
                    </div>
                    <el-button :loading="buttonLoading" type="primary" size="large" @click="handleSubmt">{{activeName == "first"?"下一步":"提交认证"}}</el-button>
                </div>
            </el-col>
        </div>

        <c-agreement ref="cAgreementRef" @change="ruleForm.manual = true" />
    </div>
</template>
<script setup>

import { ref, computed, onMounted, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { ArrowLeft, Delete } from '@element-plus/icons-vue'
import cAgreement from "./Agreement.vue";
import cBusinessLicense from "@/components/Upload/BusinessLicense.vue";
import { enterpriseType } from "@/utils/status.js";
import cImageUpload from "@/components/Upload/ImageUpload.vue";
import { deepClone, currentTime } from "@/utils/index.js";
const { proxy } = getCurrentInstance();
import { getLocalStorage, setLocalStorage } from "@/utils/cache.js"
import { useRouter, useRoute } from "vue-router";
const $router = useRouter();
const $route = useRoute()
import Countries from "@/utils/countries.js";

const props = defineProps({
    isMemberCenter: {
        type: Boolean,
        default: false
    },
})
const activeName = ref("first")
const loading = ref(false);
const buttonLoading = ref(false);
const ruleFormRef1 = ref();
const ruleFormRef2 = ref();
const ruleForm = ref({
    buyerDetail: {},
    manual: false,
    authStatus: 0,
    buyerBankList: []
});
const cAgreementRef = ref();
const time = ref("");
const disabled = ref(false)
onMounted(() => {
    getByInfo();
    activeName.value = "first"
    ruleForm.value.buyerBankList.push(
        {
            accountName: "",
            bankName: "",
            bankAddress: "",
            accountNo: "",
            swiftCode: ""
        }
    )
    bankInputList.value.push(bankInputTemp.value)

});
const handleDelete = (index) => {
    bankInputList.value.splice(index, 1)
    ruleForm.value.buyerBankList.splice(index, 1)
}
const authStatus = ref(0)
const steps = ref([
    { name: "填写信息" },
    { name: "等待审核" },
    { name: "审核结果" },
])
const bankInputList = ref([])
const bankInputTemp = ref([
    {
        name: "账户名",
        key: "accountName",
        type: "input"
    }, {
        name: "开户行名称",
        key: "bankName",
        type: "input"
    }, {
        name: "开户行地址",
        key: "bankAddress",
        type: "input"
    }, {
        name: "银行卡号",
        key: "accountNo",
        type: "input"
    }, {
        name: "SWIFT code",
        key: "swiftCode",
        type: "input"
    },
])
const handleAdd = () => {
    bankInputList.value.push(bankInputTemp.value);
    ruleForm.value.buyerBankList.push(
        {
            accountName: "",
            bankName: "",
            bankAddress: "",
            accountNo: "",
            swiftCode: ""
        }
    );
}
const rules1 = ref({
    name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
    contactName: [{ required: true, message: "请输联系人及方式", trigger: "blur" }],
    email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
    contactMobile: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
    addressCountry: [{ required: true, message: "请选择国家", trigger: "blur" }],
    addressDetails: [{ required: true, message: "请输入注册地址", trigger: "blur" }],
    "buyerDetail.regFileList": [
        { type: "array", required: true, message: "请上传注册文件", trigger: "change" },
    ],
    "buyerDetail.officePicList": [
        { required: true, message: "请上传办公照片", trigger: "change" },
    ],
    "buyerDetail.surname": [
        { required: true, message: "请上传公司章模", trigger: "change" },
    ],
    "buyerDetail.signaturePrincipal": [
        { required: true, message: "请上传委托人签字", trigger: "change" },
    ],
})
// const rules2 = ref({
//     "buyerBankList.accountName": [
//         { required: true, message: "请输入账户名", trigger: "change" },
//     ],
//     "buyerBankList.bankName": [
//         { required: true, message: "请输入开户行名称", trigger: "change" },
//     ],
//     "buyerBankList.bankAddress": [
//         { required: true, message: "请输入开户行地址", trigger: "change" },
//     ],
//     "buyerBankList.accountNo": [
//         { required: true, message: "请输入银行卡号", trigger: "change" },
//     ],
//     "buyerBankList.swiftCode": [
//         { required: true, message: "请输入SWIFT code", trigger: "change" },
//     ],
// });

const handleOpenManual = () => {
    cAgreementRef.value.handleOpen();
};
const getByInfo = () => {
    let url = "/buyer/detail"

    proxy.$get({ url }).then(
        (res) => {
            if (res.authStatus > 0 && $route.query.clearInfo != 1) {
                disabled.value = true
                ruleForm.value = res.buyerInfo
                ruleForm.value.email = res.email

            }
            ruleForm.value.authStatus = res.authStatus
            setLocalStorage("USER_INFO", res)
            authStatus.value = res.authStatus
        }
    );
}
const toDefault = () => {
    $router.push({ path: "/" })
}
const toAuthentication = () => {
    if (props.isMemberCenter) {
        $router.push({ path: "/Authentication", query: { clearInfo: 1 } })
    } else {
        ruleForm.value = {
            buyerDetail: {},
            manual: false,
            authStatus: getLocalStorage("USER_INFO").authStatus,
            buyerBankList: []
        }
        bankInputList.value = []
        disabled.value = false
    }

}
const handleSubmt = () => {
    switch (activeName.value) {
        case "first":
            ruleFormRef1.value.validate((valid) => {
                if (valid) {
                    activeName.value = "second"
                }
            })
            break;
        case "second":
            // ruleFormRef2.value.validate((valid) => {
            //     if (valid) {

            const data = deepClone(ruleForm.value);

            if (!data.manual) {
                ElMessage.warning("请查看并同意企业认证协议!");
                return;
            }
            // 0-未认证，1-认证中，2-已认证，3=已驳回
            let url = {
                0: "/buyerInfo/certification",
                2: "/buyerInfo/anewCertification",
                3: "/buyerInfo/anewCertification",
            }[data.authStatus];

            buttonLoading.value = true;
            proxy.$post({ url, data }).then(
                (res) => {
                    ElMessage.success("操作成功");
                    // getByInfo();
                    buttonLoading.value = false;
                    let url = "/buyer/detail"
                    proxy.$get({ url }).then(
                        (res) => {
                            setLocalStorage("USER_INFO", res)
                            $router.push({ path: "/" })
                        }
                    );


                },
                () => {
                    buttonLoading.value = false;
                }
            );
            //     }
            // })
            break;
    }

};

</script>
<style lang="less" scoped>
.topBlock {
    height: 64px;
    padding: 0 20px;
    background: #ffffff;
    border-radius: 3px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    .back {
        cursor: pointer;
        font-size: 14px;
        font-weight: 400;
        color: #5e6163;
        line-height: 20px;
        width: 5%;
    }
    .pageTitle {
        text-align: center;
        font-size: 20px;
        font-weight: 500;
        color: #202020;
        line-height: 28px;
        // margin-right: 100px;
        // margin-left: 450px;
        margin-right: 8.3%;
        margin-left: 37.5%;
    }
    .progress {
        width: 33.66%;
        display: flex;
        .item {
            display: flex;
            align-items: center;
            margin: auto;
            position: relative;
            &.active {
                .step {
                    background: #3a85f5;
                    &::after {
                        background: rgba(58, 133, 245, 0.2);
                    }
                }
                .name {
                    color: #202020;
                }
                &::after {
                    position: absolute;
                    content: "";
                    width: 40%;
                    height: px;
                    background: #3a85f5;
                    right: -49%;
                    top: 0;
                    bottom: 0;
                    margin-top: auto;
                    margin-bottom: auto;
                }
            }

            &::after {
                position: absolute;
                content: "";
                width: 40%;
                height: 1px;
                background: rgba(0, 0, 0, 0.15);
                right: -49%;
                top: 0;
                bottom: 0;
                margin-top: auto;
                margin-bottom: auto;
            }
            &:nth-child(3)::after {
                content: none;
            }
            .name {
                font-size: 14px;
                font-weight: 400;
                color: #8d9297;
            }
            .step {
                width: 18px;
                height: 18px;
                background: #cccccc;
                text-align: center;
                font-size: 13px;
                font-family: HelveticaNeue;
                color: #ffffff;
                line-height: 18px;
                border-radius: 300px;
                margin-right: 10px;
                position: relative;

                &::after {
                    width: 24px;
                    height: 24px;
                    background: rgba(204, 204, 204, 0.2);
                    content: "";
                    position: absolute;
                    top: -3px;
                    right: -3px;
                    bottom: -3px;
                    left: -3px;
                    border-radius: 300px;
                }
            }
        }
    }
}
.topBox {
    background: #ffffff;

    border-radius: 3px 3px 0px 0px;
    padding: 15px 30px;
    .title {
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #202020;
        line-height: 28px;
    }
}
.firstRed {
    :deep(.el-form-item__label) {
        &::first-letter {
            color: red;
        }
    }
}
:deep(.el-tabs__header) {
    padding: 0 30px;
    box-shadow: 0px 6px 8px 0px rgba(0, 79, 115, 0.05);
}
:deep(.el-tabs__nav-wrap::after) {
    height: 0;
}
:deep(.el-input--large.enterprise-name .el-input__wrapper) {
    border-radius: var(--el-input-border-radius) 0px 0px
        var(--el-input-border-radius);
}
.upload_tips {
    font-size: 14px;
    color: #8d9297;
}

.enterprise-select {
    background: #3a85f5;
    font-weight: 400;
    color: #ffffff;
    padding: 0px 20px;
    height: 40px;
    font-size: 14px;
    border-radius: 0px 4px 4px 0px;
}
.enterprise-img {
    position: absolute;
    right: -25px;
    width: 16px;
    height: 16px;
}
.title {
    font-size: 14px;
    font-weight: 500;
    color: #26282a;
    margin-bottom: 16px;
}
.save-time {
    font-size: 12px;
    color: #9a9a9a;
}
.living-example {
    position: relative;
}
.living-example_img {
    width: 90px;
    height: 90px;
    border: 1px dashed rgba(0, 0, 0, 0.17);
}
.living-example_title {
    position: absolute;
    left: 0;
    right: 0;
    font-size: 12px;
    font-weight: 400;
    color: #8c8c8c;
    text-align: center;
}
.living-example_del {
    position: absolute;
    top: -5px;
    right: -5px;
    color: red;
    border-radius: 30px;
    z-index: 9999;
}
.seal-sample {
    margin-right: 30px;
    .seal-example_img {
        width: 110px;
        height: 110px;
    }
    .seal-sample_upload {
        display: flex;
        justify-content: center;
    }
    .seal-sample_title {
        font-size: 12px;
        font-weight: 400;
        color: #8c8c8c;
        text-align: center;
    }
}
</style>